<template>
  <a-card :body-style="{padding: '24px 32px'}" :bordered="false">
    <a-form @submit="handleSubmit" :form="form">
      <a-form-item
        label="账号"
        :labelCol="labelCol"
        :wrapperCol="wrapperCol"
        extra="管理员将使用账号登录管理后台"
      >
        <a-input
          v-decorator="[
            'account',
            {rules: [{ required: true, message: '请填写管理员账号' }]}
          ]"
          name="account"
          placeholder="请填写管理员账号"/>
      </a-form-item>
      <a-form-item
        label="密码"
        :labelCol="labelCol"
        :wrapperCol="wrapperCol"
        extra="设置或重置员工的登录密码"
      >
        <a-input
          placeholder="请填写密码"
          type="password"
          v-decorator="[
            'password',
            {rules: [{ required: true, message: '请填写密码' }]}
          ]"/>
      </a-form-item>
      <a-form-item
        label="姓名"
        :labelCol="labelCol"
        :wrapperCol="wrapperCol"
      >
        <a-input
          placeholder="请填写管理员姓名"
          v-decorator="[
            'real_name',
            {rules: [{ required: true, message: '请填写管理员姓名' }]}
          ]"
        />
      </a-form-item>
      <a-form-item
        label="手机号"
        :labelCol="labelCol"
        :wrapperCol="wrapperCol"
        extra="管理员可使用关联手机号找回密码"
      >
        <a-input
          placeholder="请填写管理员关联手机号"
          v-decorator="[
            'phone',
            {
              rules: [
                { required: true, message: '请填写管理员关联手机号' },
                { pattern: '^(?:\\+?86)?1(?:3\\d{3}|5[^4\\D]\\d{2}|8\\d{3}|7(?:[235-8]\\d{2}|4(?:0\\d|1[0-2]|9\\d))|9[0-35-9]\\d{2}|66\\d{2})\\d{6}$', message: '请正确填写手机号' }
              ]
            }
          ]"
        />
      </a-form-item>
      <a-form-item
        label="角色"
        :labelCol="labelCol"
        :wrapperCol="wrapperCol"
      >
        <a-select
          placeholder="请选择"
          v-decorator="['roles', { rules: [{required: true, message: '请选择角色'}] }]">

          <a-select-option v-for="role in roles" :key="role.id" :value="role.name">{{ role.name }}</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item
        label="状态"
        :labelCol="labelCol"
        :wrapperCol="wrapperCol"
      >
        <a-radio-group
          v-decorator="['status', { initialValue: 1 }]">
          <a-radio :value="1">启用</a-radio>
          <a-radio :value="2">禁用</a-radio>
        </a-radio-group>
      </a-form-item>
      <a-form-item
        :wrapperCol="{ xs: { span: 24}, sm: { span: 16, offset: 7 } }"
      >
        <a-button htmlType="submit" type="primary">提交</a-button>
      </a-form-item>
    </a-form>
  </a-card>
</template>

<script>
  import md5 from 'md5'
  import { saveManager, getRoleList } from '@/api/system'
  import notification from 'ant-design-vue/es/notification'

  export default {
    name: 'BaseForm',
    data () {
      return {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 7 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 10 }
        },
        value: 1,

        // form
        form: this.$form.createForm(this),
        roles: {}
      }
    },
    created () {
      getRoleList({ per_page: 999, status: 1, select: 'id,name', user_statistics: 0 }).then(res => {
        this.roles = res.data
      })
    },
    methods: {

      // handler
      handleSubmit (e) {
        e.preventDefault()
        this.form.validateFields((err, values) => {
          if (err !== null) {
            return false
          }

          console.log(values)

          values.password = md5(values.password)

          saveManager(values)
            .then(res => {
              this.$router.push('/system/account_management/list')
            })
            .catch(e => {
              notification.error({
                message: '错误',
                description: e.response.data.message
              })
            })
        })
      }
    }
  }
</script>
